<div class="tab-content-pad role-management">
    <div class="row m-b20">
        <div class="col-sm-6">
            <button class="btn btn-primary" ng-click="vm.create()">
                <span class="icon icon-add" aria-hidden="true"></span>
                <span class="m-l5" i-translate="CREATE_NEW_ROLE"></span>
            </button>
        </div>
        <div class="col-sm-6 text-right">
            <div class="search-field m-t5">
                <span class="icon icon-search"></span>
                <input type="search"
                       class="uui-search"
                       placeholder="Search"
                       ng-change="vm.search()"
                       id="searchRole"
                       ng-model="vm.searchText"
                       ng-model-options="{ debounce: 300 }">
            </div>
        </div>
    </div>
    <edit-role ng-if="vm.role"
               id="edit-role"
               role="vm.role"
               account-roles="vm.accountRoles"
               on-close="vm.onCloseEditRole()">
    </edit-role>
    <div class="table-responsive container-fluid">
        <div class="row">
            <div class="wrapper-authorities-col">
                <table class="table table-striped authorities-table authorities-column">
                    <thead>
                    <tr indigo-sort="vm.sortBy.field"
                        is-ascending="vm.sortBy.isAscending"
                        on-sort="vm.sortRoles(predicate, isAscending)">
                        <th indigo-sort-by="name">
                            <span i-translate="ROLE_NAME"></span>
                            <span class="glyphicon glyphicon-sort role-management__icon-sort"></span>
                        </th>
                    </tr>
                    <tbody>
                    <tr ng-repeat="role in vm.roles track by role.id">
                        <td>
                            <div class="role-name" uib-tooltip="{{role.name}}" ng-bind="role.name"></div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div indigo-scroller="x">
                <table class="table table-striped authorities-table">
                    <thead>
                    <tr>
                        <th ng-repeat="authority in vm.authorities track by $index"
                            uib-tooltip="{{authority.tooltip}}"
                            tooltip-placement="top"
                            tooltip-append-to-body="true">
                            <span ng-bind="authority.description"></span>
                        </th>
                        <th i-translate="ACTION"></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="role in vm.roles track by role.id">
                        <td ng-repeat="authority in vm.authorities track by $index">
                                <span ng-class="{'glyphicon glyphicon-ok-sign': vm.hasAuthority(role, authority)}"
                                      class="role-check-icon"></span>
                        </td>
                        <td>
                            <button type="submit"
                                    ng-click="vm.editRole(role)"
                                    ng-if="!role.system"
                                    class="btn btn-info btn-small">
                                <span class="icon icon-edit"></span>
                                <span class="m-l5" i-translate="EDIT"></span>
                            </button>
                            <button type="submit"
                                    ng-click="vm.deleteRole(role)"
                                    ng-if="!role.system"
                                    class="btn btn-info btn-small">
                                <span class="icon icon-delete"></span>
                                <span class="m-l5" i-translate="DELETE"></span>
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="text-center">
        <div uib-pagination
             class="pagination-sm"
             total-items="vm.totalItems"
             items-per-page="vm.itemsPerPage"
             ng-model="vm.page"
             ng-change="vm.loadRoles()">
        </div>
    </div>
</div>
